{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>我的互动</title>
<style type="text/css">
    .mui-content{padding-bottom: 55px;}
    .mui-grid-view.mui-grid-9:before{height: 1px;}
    .mui-slider-indicator{text-align: left;}
</style>
{% endblock %}
{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <!--社区、帖子、问答-->
    <div id="slider" class="mui-slider mb-count">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item mb-control-item mui-active" href="#item1mobile">
                社区
            </a>
            <a class="mui-control-item mb-control-item" href="#item2mobile">
                帖子
            </a>
            <a class="mui-control-item mb-control-item" href="#item3mobile">
                问答
            </a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
        <div class="mui-slider-group bbs-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <ul class="mui-table-view mui-table-view-chevron">
                    <!--社区循环主体开始-->
                    {%for item in data.list%}
                    <li class="mui-table-view-cell mui-media">
                        <a href="bbscont?id={{item.id}}">
                            <div class="mui-media-body">
                                <img class="mui-media-object mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.icon}}">
                                {{item.name}}
                                <p class="mui-ellipsis"><span>人气:{{item.userCount}} </span> <span> 帖子:{{item.postCount}}</span></p>
                                <p class="mui-pull-left">
                                    <span class="mb-border-radius xw-box">考试</span>
                                </p>
                            </div>
                        </a>
                        <input class="mui-btn" type="button" data-id="{{item.collectionId}}" name="jion" id="jion" value="取消关注" onclick="js_sq(this)">
                    </li>
                    {%endfor%}
                    <!--社区循环主体结束-->
                </ul>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <!--帖子循环主体开始-->
                {%for item in post.list%}
                <div class="mb-post-list-3 xw-border-bottom">
                    <a class="bbs-user-info mui-clearfix" href="javascript:void(0)">
                        <a class="bbs-user-info mui-clearfix" href="userinfo?id={{item.objectId}}">
                            <img class="bbs-user-photo mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
                            <span class="bbs-user-name mui-pull-left">{{item.name}}</span>
                        </a>
                        <span class="bbs-cancel-btn mui-pull-right">
                            <input type="button" data-id="{{item.collectionId}}"name="cancel"  value="取消收藏" onclick="js_post(this)" />
                        </span>

                    </a>


                    <a href="postdetail?id={{item.id}}">
                        <h4 class="mui-ellipsis-2">{{item.title}}</h4>
                        <div class="mb-post-imgs">
                            <ul class="mui-clearfix">
                                {%for item2 in item.images%}
                                <li><img src="{{ctx.app.config.api.image}}/{{item2}}"></li>
                                {%endfor%}
                            </ul>
                        </div>
                    </a>
                    <p class="bbs-operaton bbs-operaton1 mui-clearfix">
                        <span class="mui-pull-left"><i class="iconfont icon-zan"></i>{{item.postLikeCount}}</span>
                        <span class="mui-pull-left"><i class="iconfont icon-xiaoxi"></i>{{item.commentCount}}</span>
                        <span class="mui-pull-right">来自逢考必过秘籍社区</span>
                    </p>
                </div>
                {% endfor %}
                <!--帖子循环主体结束-->
            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content">
                <!--问答循环主体开始-->
                {%for item in answer.list%}
                <div class="mb-post-list-3 xw-border-bottom">
                    <a class="bbs-user-info mui-clearfix" href="userinfo?id={{item.objectId}}">
                        <img class="bbs-user-photo mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
                        <span class="bbs-user-name mui-pull-left">{{item.name}}</span>
                    </a>
                        <span class="bbs-cancel-btn mui-pull-right"><input type="button" name="cancel" data-id="{{item.collectionId}}" value="取消收藏" onclick="js_post(this)"/></span>

                    <a href="askquestions?id={{item.id}}">
                        <h4 class="mui-ellipsis-2">{{item.title}}</h4>
                        <div class="mb-post-imgs">
                            <ul class="mui-clearfix">
                                {%for item2 in item.images%}
                                <li><img src="{{ctx.app.config.api.image}}/{{item2}}"></li>
                                {%endfor%}
                            </ul>
                        </div>
                    </a>
                    <p class="bbs-operaton bbs-operaton1 mui-clearfix">
                        <span class="mui-pull-left">{{item.createDate}}</span>
                        <span class="mui-pull-right">回答{{item.commentCount}}</span>
                    </p>
                </div>
                {%endfor%}
                <!--问答循环主体结束-->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

    function js_sq(e){
        var id = $(e).context['dataset']['id'];
        mui.post('/delcollect', {
                collectionIds:id,
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    $(e).parent().attr('style','display:none;');
                    mui.toast('取消关注');
                }
            },'json'
        );
    }

    function js_post(e) {
        var id = $(e).context['dataset']['id'];
        mui.post('/delcollect', {
                collectionIds:id,
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    $(e).parent().parent().attr('style','display:none;');
                    mui.toast('取消关注');
                }
            },'json'
        );
    }

</script>
<!--flotdemo-->
{% endblock %}
